src/services/api/eas/index.ts (1)

64-78: Consider adding error handling for invalid URLs.

The verifyDiscourseTopic function accepts a URL parameter but doesn't validate it. Consider adding URL validation before making the API call.

 export const verifyDiscourseTopic = async ({
   topicUrl,
   verificationJwt,
 }: VerifyDiscourseTopicParams) => {
+  try {
+    new URL(topicUrl); // Validate URL format
+  } catch (e) {
+    throw new Error('Invalid topic URL format');
+  }
   return api.post('/discourse-verification/verify', {
     topicUrl,
     verificationJwt,
   });
 };

src/services/api/index.ts (1)

64-71: Add safer error message access pattern.

The current error message access could be made more robust to prevent potential undefined access errors.

       showSnackbar(
-        `${error.response?.data?.message?.message || 'Internal server error'}`,
+        error.response?.data?.message?.message 
+          ?? error.response?.data?.message 
+          ?? error.message 
+          ?? 'Internal server error',
         {
           severity: 'error',
           duration: 5000,
           position: { vertical: 'bottom', horizontal: 'right' },
         }
       );

src/components/pages/attestations/Discourse/StepThree.tsx (1)

31-36: Strengthen token validation.

The current implementation only checks for token existence. Consider adding validation for token format and expiration.

 const handleGenerateSignedDelegation = async () => {
   const siweJwt = localStorage.getItem('OCI_TOKEN');
-  if (!siweJwt || !provider) return;
+  if (!siweJwt || !provider) {
+    showSnackbar('Missing required tokens. Please start over.', {
+      severity: 'error',
+    });
+    return;
+  }
 
   const anyJwt = localStorage.getItem('DISCOURSE_JWT') as string;
+  try {
+    const decodedJwt = jwtDecode(anyJwt);
+    if (decodedJwt.exp && Date.now() >= decodedJwt.exp * 1000) {
+      showSnackbar('Token has expired. Please start over.', {
+        severity: 'error',
+      });
+      return;
+    }
+  } catch (error) {
+    showSnackbar('Invalid token format. Please start over.', {
+      severity: 'error',
+    });
+    return;
+  }

src/components/pages/attestations/Discourse/StepFour.tsx (1)

51-51: Consider making navigation path configurable.

The navigation path is hardcoded. Consider making it configurable or using a constant.

+const IDENTIFIERS_PATH = '/identifiers';
+
 const StepFour: React.FC<StepFourProps> = ({ attestedSignutare }) => {
   // ...
-  navigate('/identifiers');
+  navigate(IDENTIFIERS_PATH);

src/pages/Identifiers/Attestation/Attestation.tsx (1)

50-93: Extract duplicated Paper component styling.

The Paper component's styling is duplicated between the Discourse and non-Discourse renders. Consider extracting it into a shared constant or component.

+const paperStyles = {
+  height: 'calc(100vh - 140px)',
+  p: 2,
+  borderRadius: 4,
+  backgroundColor: 'white',
+  border: '1px solid rgba(0, 0, 0, 0.05)',
+  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',
+};

 if (provider === Provider.Discourse) {
   return (
     <>
       <CustomBreadcrumb breadcrumbs={breadcrumbs} className="pb-3" />
-      <Paper
-        sx={{
-          height: 'calc(100vh - 140px)',
-          p: 2,
-          borderRadius: 4,
-          backgroundColor: 'white',
-          border: '1px solid rgba(0, 0, 0, 0.05)',
-          boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',
-        }}
+      <Paper
+        sx={paperStyles}
         variant="elevation"
         elevation={0}
       >

src/components/pages/attestations/Discourse/StepTwo.tsx (1)

98-104: Simplify URL validation pattern.

The current URL regex pattern is overly complex. Consider using a simpler pattern or a URL validation library.

-              pattern: {
-                value:
-                  /^(https?:\/\/(?:www\.)?(?:[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b)(?:[-a-zA-Z0-9()@:%_+.~#?&//=]*))$/,
-                message: 'Please enter a valid URL',
-              },
+              validate: (value) => {
+                try {
+                  new URL(value);
+                  return true;
+                } catch {
+                  return 'Please enter a valid URL';
+                }
+              },

src/pages/Identifiers/Identifiers.tsx (1)

130-133: Use a constant for the delay duration.

Extract the hardcoded delay value into a named constant for better maintainability.

+const REVOCATION_DELAY_MS = 2000;
+
 const revokeDelegation = async (response: RevokePayload, uid: string) => {
   // ...
-      await new Promise((resolve) => {
-        setTimeout(resolve, 2000);
-      });
+      await new Promise((resolve) => setTimeout(resolve, REVOCATION_DELAY_MS));
   // ...
 };

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/pages/Identifiers/Attestation/Attestation.tsx (1)

5-8: ⚠️ Potential issue

Create the missing Discourse step components.

The build is failing because the Discourse step components are missing. Create these components in the following directory:
src/components/pages/Attestations/Discourse/

🧰 Tools

🪛 GitHub Check: test/node 18/ubuntu-latest

[failure] 5-5:
Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepFour' or its corresponding type declarations.

---

[failure] 6-6:
Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepOne' or its corresponding type declarations.

---

[failure] 7-7:
Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepThree' or its corresponding type declarations.

---

[failure] 8-8:
Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepTwo' or its corresponding type declarations.

🪛 GitHub Actions: on-chain-platform-ci

[error] 5-5: Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepFour' or its corresponding type declarations

src/components/pages/attestations/Discourse/DiscourseStepTwo.tsx (2)

102-104: Strengthen URL validation pattern.

The current URL validation pattern could be more specific to Discourse URLs. Consider adding validation for:

1. Known Discourse domain patterns
2. Topic URL path structure

---

129-134: Add loading state for copy operation.

The copy button should show a loading state during the clipboard operation to prevent multiple clicks.

-                <Tooltip title="Copy to clipboard">
-                  <IconButton onClick={copyToClipboard}>
-                    <ContentCopyIcon />
-                  </IconButton>
-                </Tooltip>
+                <Tooltip title={copying ? 'Copying...' : 'Copy to clipboard'}>
+                  <IconButton 
+                    onClick={copyToClipboard}
+                    disabled={copying}
+                  >
+                    {copying ? <CircularProgress size={20} /> : <ContentCopyIcon />}
+                  </IconButton>
+                </Tooltip>

src/components/pages/attestations/Discourse/DiscourseStepFour.tsx (1)

97-99: Enhance gas fee information.

The gas fee notice could be more informative:

-      <Typography variant="caption">
-        You need to pay some <b>gas</b> to complete the process.
-      </Typography>
+      <Typography variant="caption">
+        This operation requires a blockchain transaction. You'll need to pay gas fees 
+        in your wallet's native currency to complete the attestation.
+      </Typography>

src/pages/Identifiers/Attestation/Attestation.tsx (3)

23-28: Consider adding descriptions to the Discourse steps.

To improve user experience, consider adding descriptions to each step to help users understand what to expect. For example:

 const discourseSteps = [
-  { label: 'Generate Token' },
-  { label: 'Verify Topic URL' },
-  { label: 'Attest' },
-  { label: 'Complete' },
+  { 
+    label: 'Generate Token',
+    description: 'Generate a unique verification token for your Discourse account'
+  },
+  {
+    label: 'Verify Topic URL',
+    description: 'Provide the URL of your verification topic'
+  },
+  {
+    label: 'Attest',
+    description: 'Sign your attestation'
+  },
+  {
+    label: 'Complete',
+    description: 'View your completed attestation'
+  },
 ];

---

Line range hint 33-34: Fix typo in variable name.

The variable name attestedSignutare contains a typo. It should be attestedSignature.

-const [attestedSignutare, setAttestedSignature] =
+const [attestedSignature, setAttestedSignature] =
   useState<AttestPayload | null>(null);

🧰 Tools

🪛 GitHub Check: test/node 18/ubuntu-latest

[failure] 5-5:
Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepFour' or its corresponding type declarations.

---

[failure] 6-6:
Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepOne' or its corresponding type declarations.

---

[failure] 7-7:
Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepThree' or its corresponding type declarations.

---

[failure] 8-8:
Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepTwo' or its corresponding type declarations.

---

[failure] 9-9:
Cannot find module '../../../components/pages/Attestations/StepOne' or its corresponding type declarations.

---

[failure] 10-10:
Cannot find module '../../../components/pages/Attestations/StepThree' or its corresponding type declarations.

---

[failure] 11-11:
Cannot find module '../../../components/pages/Attestations/StepTwo' or its corresponding type declarations.

🪛 GitHub Actions: on-chain-platform-ci

[error] 5-5: Cannot find module '../../../components/pages/Attestations/Discourse/DiscourseStepFour' or its corresponding type declarations

---

50-93: Consider adding error boundaries for Discourse steps.

The Discourse attestation flow involves multiple API calls and user interactions. Consider wrapping the step components with error boundaries to gracefully handle potential failures.

import { ErrorBoundary } from 'react-error-boundary';

function StepErrorFallback({ error, resetErrorBoundary }) {
  return (
    <Alert severity="error">
      <AlertTitle>Error</AlertTitle>
      {error.message}
      <Button onClick={resetErrorBoundary}>Try again</Button>
    </Alert>
  );
}

// Usage in render:
<ErrorBoundary FallbackComponent={StepErrorFallback}>
  {activeStep === 0 && (
    <DiscourseStepOne
      handleNextStep={() => setActiveStep((prev) => prev + 1)}
    />
  )}
</ErrorBoundary>

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

tsconfig.app.json (1)

31-37: 🛠️ Refactor suggestion

Simplify the include patterns to avoid redundancy.

The current include patterns have several redundancies:

1. src already includes all files under the src directory
2. The additional patterns for TypeScript files are already covered by the src entry

Apply this diff to simplify the configuration while maintaining the same coverage:

   "include": [
     ".prettierrc.cjs",
     ".eslintrc.cjs",
-    "src",
-    "src/**/*.tsx",
-    "src/**/*.ts"
+    "src"
   ]

🧰 Tools

🪛 Biome (1.9.4)

[error] 31-31: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

---

[error] 31-31: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

---

[error] 31-37: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

---

[error] 37-37: End of file expected

Use an array for a sequence of values: [1, 2]

(parse)

src/components/pages/attestations/DiscourseStepOne.tsx (1)

40-48: Enhance error handling with specific error messages.

The error handling could be more informative to help users and developers troubleshoot issues.

 onError: (error) => {
-  console.error('Failed to generate token:', error);
+  const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+  console.error('Failed to generate token:', errorMessage);
   showSnackbar(
-    'Failed to generate verification token. Please try again.',
+    `Failed to generate verification token: ${errorMessage}. Please try again.`,
     {
       severity: 'error',
     }
   );
 }

src/components/pages/attestations/DiscourseStepTwo.tsx (1)

40-51: Improve clipboard operation error handling.

The current implementation doesn't handle specific clipboard API errors or browser compatibility issues.

 const copyToClipboard = async () => {
   try {
-    navigator.clipboard.writeText(verificationCode);
+    if (!navigator.clipboard) {
+      throw new Error('Clipboard API not supported');
+    }
+    await navigator.clipboard.writeText(verificationCode);
     showSnackbar('Verification code copied to clipboard', {
       severity: 'success',
     });
   } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
     showSnackbar('Failed to copy verification code to clipboard', {
       severity: 'error',
+      description: errorMessage
     });
   }
 };

src/pages/Identifiers/Attestation/Attestation.tsx (4)

Line range hint 33-34: Fix typo in state variable name.

The variable name attestedSignutare contains a typo. It should be attestedSignature.

-  const [attestedSignutare, setAttestedSignature] =
+  const [attestedSignature, setAttestedSignature] =
     useState<AttestPayload | null>(null);

---

54-65: Reduce code duplication by extracting Paper styles.

The Paper component styles are duplicated. Consider extracting them into a shared constant or styled component.

+const paperStyles = {
+  height: 'calc(100vh - 140px)',
+  p: 2,
+  borderRadius: 4,
+  backgroundColor: 'white',
+  border: '1px solid rgba(0, 0, 0, 0.05)',
+  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',
+};

 // Then use it in both Paper components:
-<Paper
-  sx={{
-    height: 'calc(100vh - 140px)',
-    p: 2,
-    borderRadius: 4,
-    backgroundColor: 'white',
-    border: '1px solid rgba(0, 0, 0, 0.05)',
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',
-  }}
+<Paper sx={paperStyles}

Also applies to: 97-108

---

50-93: Add info alert for Discourse attestation flow.

The Discourse flow is missing the informative alert that exists in the default flow. Consider adding a similar alert to maintain consistency in user experience.

   if (provider === Provider.Discourse) {
     return (
       <>
         <CustomBreadcrumb breadcrumbs={breadcrumbs} className="pb-3" />
         <Paper sx={paperStyles} variant="elevation" elevation={0}>
+          <Alert severity="info" sx={{ mb: 4 }}>
+            <AlertTitle>Link Your Discourse Account</AlertTitle>
+            Attest your Discourse account by linking it to your wallet address.
+            This allows you to prove ownership of your Discourse profile.
+          </Alert>
           <CustomStepper steps={discourseSteps} activeStep={activeStep} />

---

88-88: Update prop name to match the corrected state variable.

Update the prop name to match the corrected state variable name.

-            <DiscourseStepFour attestedSignutare={attestedSignutare} />
+            <DiscourseStepFour attestedSignature={attestedSignature} />

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro